<!DOCTYPE HTML>
<html lang="zh-CN">
<!-- shw2018 洪卫  modify 2019.08.15-->



<head><meta name="generator" content="Hexo 3.9.0">
    <meta charset="utf-8">
    <meta name="keywords" content="js里数组常用的方法, 前端自学,web前端">
    <meta name="baidu-site-verification" content="fmlEuI34ir">
    <meta name="google-site-verification" content="KeoTn_OFy4ndJwXNmm2gMeQfPhd7alqE9vQDwI32KCY">
    <meta name="description" content="js 里数组常用的方法concat方法
concat方法不会改变原数组，会返回一个拼接后的新数组。

var arr1= [1,2,3];
var arr2=[3,4];
arr1.concat(arr2);
console.log(arr">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit|ie-stand|ie-comp">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <title>js里数组常用的方法 | 小明</title>
    <link rel="icon" type="image/png" href="/favicon.png">

    <link rel="stylesheet" type="text/css" href="/libs/awesome/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/materialize/1.0.0/css/materialize.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/aos/3.0.0-beta.6/aos.css">
    <link rel="stylesheet" type="text/css" href="/libs/animate/animate.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/lightgallery/1.6.12/css/lightgallery.min.css">
    <link rel="stylesheet" type="text/css" href="/css/matery.css">
    <link rel="stylesheet" type="text/css" href="/css/my.css">
    
    <style type="text/css">
        
            
            code[class*="language-"],
            pre[class*="language-"] {
                white-space: pre !important;
            }

        
    </style>

    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
    
    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?46e79e71af0709a5b9106bf20cecc493";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>

    
    
        <script>
            (function(){
                var bp = document.createElement('script');
                var curProtocol = window.location.protocol.split(':')[0];
                if (curProtocol === 'https') {
                    bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
                }
                else {
                    bp.src = 'http://push.zhanzhang.baidu.com/push.js';
                }
                var s = document.getElementsByTagName("script")[0];
                s.parentNode.insertBefore(bp, s);
            })();
        </script>
    

<link rel="stylesheet" href="/css/prism-tomorrow.css" type="text/css">
<link rel="stylesheet" href="/css/prism-line-numbers.css" type="text/css"></head>

<body>




    <header class="navbar-fixed">
    <nav id="headNav" class="bg-color nav-transparent">
        <div id="navContainer" class="nav-wrapper container">
            <div class="brand-logo">
                <a href="/" class="waves-effect waves-light">
                    
                    <img src="/medias/logo.png" class="logo-img" alt="LOGO">
                    
                    <span class="logo-span">小明</span>
                </a>
            </div>
            


<!-- <a href="#" data-target="mobile-nav" class="sidenav-trigger button-collapse"><i class="fa fa-navicon"></i></a>
<ul class="right">
    
    <li class="hide-on-med-and-down">
        <a href="/" class="waves-effect waves-light">
            
            <i class="fa fa-home"></i>
            
            <span>首页</span>
        </a>
    </li>
    
    <li class="hide-on-med-and-down">
        <a href="/tags" class="waves-effect waves-light">
            
            <i class="fa fa-tags"></i>
            
            <span>标签</span>
        </a>
    </li>
    
    <li class="hide-on-med-and-down">
        <a href="/categories" class="waves-effect waves-light">
            
            <i class="fa fa-bookmark"></i>
            
            <span>分类</span>
        </a>
    </li>
    
    <li class="hide-on-med-and-down">
        <a href="/archives" class="waves-effect waves-light">
            
            <i class="fa fa-archive"></i>
            
            <span>归档</span>
        </a>
    </li>
    
    <li class="hide-on-med-and-down">
        <a href="/AV" class="waves-effect waves-light">
            
            <i class="fa fa-music"></i>
            
            <span>视听</span>
        </a>
    </li>
    
    <li class="hide-on-med-and-down">
        <a href="/galleries" class="waves-effect waves-light">
            
            <i class="fa fa-photo"></i>
            
            <span>相册</span>
        </a>
    </li>
    
    <li class="hide-on-med-and-down">
        <a href="/about" class="waves-effect waves-light">
            
            <i class="fa fa-user-circle-o"></i>
            
            <span>关于我</span>
        </a>
    </li>
    
    <li>
        <a href="#searchModal" class="modal-trigger waves-effect waves-light">
            <i id="searchIcon" class="fa fa-search" title="搜索"></i>
        </a>
    </li>
</ul> -->

<!-- 支持二级菜单特性 洪卫 shw2018 modify 2019.09.17  -->
<a href="#" data-target="mobile-nav" class="sidenav-trigger button-collapse"><i class="fa fa-navicon"></i></a>
<ul class="right nav-menu">
    
      <li class="hide-on-med-and-down nav-item" >

        
            <a href="/" class="waves-effect waves-light">
              
                <i class="fa fa-home"></i>
              
              <span>首页</span>
            </a>

            
      </li>
    
      <li class="hide-on-med-and-down nav-item" >

        
            <a href="/tags" class="waves-effect waves-light">
              
                <i class="fa fa-tags"></i>
              
              <span>标签</span>
            </a>

            
      </li>
    
      <li class="hide-on-med-and-down nav-item" >

        
            <a href="/categories" class="waves-effect waves-light">
              
                <i class="fa fa-bookmark"></i>
              
              <span>分类</span>
            </a>

            
      </li>
    
      <li class="hide-on-med-and-down nav-item" >

        
            <a href="/archives" class="waves-effect waves-light">
              
                <i class="fa fa-archive"></i>
              
              <span>归档</span>
            </a>

            
      </li>
    
      <li class="hide-on-med-and-down nav-item" >

        
            <a href="/AV" class="waves-effect waves-light">
              
                <i class="fa fa-music"></i>
              
              <span>视听</span>
            </a>

            
      </li>
    
      <li class="hide-on-med-and-down nav-item" >

        
            <a href="/galleries" class="waves-effect waves-light">
              
                <i class="fa fa-photo"></i>
              
              <span>相册</span>
            </a>

            
      </li>
    
      <li class="hide-on-med-and-down nav-item" >

        
            <a href="/about" class="waves-effect waves-light">
              
                <i class="fa fa-user-circle-o"></i>
              
              <span>关于我</span>
            </a>

            
      </li>
    

    <li>
        <a href="#searchModal" class="modal-trigger waves-effect waves-light">
            <i id="searchIcon" class="fa fa-search" title="搜索"></i>
        </a>
    </li>

</ul>

<div id="mobile-nav" class="side-nav sidenav">

    <div class="mobile-head bg-color">
        
        <img src="/medias/logo.png" class="logo-img circle responsive-img">
        
        <div class="logo-name">小明</div>
        <div class="logo-desc">
            
            专注于web前端，分享技术，分享知识。
            
        </div>
    </div>

    

    <ul class="menu-list mobile-menu-list">
        
        <li>
            <a href="/" class="waves-effect waves-light">
                
                <i class="fa fa-fw fa-home"></i>
                
                首页
            </a>
        </li>
        
        <li>
            <a href="/tags" class="waves-effect waves-light">
                
                <i class="fa fa-fw fa-tags"></i>
                
                标签
            </a>
        </li>
        
        <li>
            <a href="/categories" class="waves-effect waves-light">
                
                <i class="fa fa-fw fa-bookmark"></i>
                
                分类
            </a>
        </li>
        
        <li>
            <a href="/archives" class="waves-effect waves-light">
                
                <i class="fa fa-fw fa-archive"></i>
                
                归档
            </a>
        </li>
        
        <li>
            <a href="/AV" class="waves-effect waves-light">
                
                <i class="fa fa-fw fa-music"></i>
                
                视听
            </a>
        </li>
        
        <li>
            <a href="/galleries" class="waves-effect waves-light">
                
                <i class="fa fa-fw fa-photo"></i>
                
                相册
            </a>
        </li>
        
        <li>
            <a href="/about" class="waves-effect waves-light">
                
                <i class="fa fa-fw fa-user-circle-o"></i>
                
                关于我
            </a>
        </li>
        
        
    </ul>

   
   
<!-- 支持二级菜单特性 洪卫 shw2018 modify 2019.09.17  -->
<!-- <ul class="menu-list mobile-menu-list">
    
        <li class="m-nav-item">
                
                    <a href="/" class="waves-effect waves-light">
                        
                        <i class="fa fa-fw fa-home"></i>
                        
                        首页
                    </a>
              
            </li>
        
        <li class="m-nav-item">
                
                    <a href="/tags" class="waves-effect waves-light">
                        
                        <i class="fa fa-fw fa-tags"></i>
                        
                        标签
                    </a>
              
            </li>
        
        <li class="m-nav-item">
                
                    <a href="/categories" class="waves-effect waves-light">
                        
                        <i class="fa fa-fw fa-bookmark"></i>
                        
                        分类
                    </a>
              
            </li>
        
        <li class="m-nav-item">
                
                    <a href="/archives" class="waves-effect waves-light">
                        
                        <i class="fa fa-fw fa-archive"></i>
                        
                        归档
                    </a>
              
            </li>
        
        <li class="m-nav-item">
                
                    <a href="/AV" class="waves-effect waves-light">
                        
                        <i class="fa fa-fw fa-music"></i>
                        
                        视听
                    </a>
              
            </li>
        
        <li class="m-nav-item">
                
                    <a href="/galleries" class="waves-effect waves-light">
                        
                        <i class="fa fa-fw fa-photo"></i>
                        
                        相册
                    </a>
              
            </li>
        
        <li class="m-nav-item">
                
                    <a href="/about" class="waves-effect waves-light">
                        
                        <i class="fa fa-fw fa-user-circle-o"></i>
                        
                        关于我
                    </a>
              
            </li>
        

        
    </ul> -->

</div>

        </div>

        
    </nav>

</header>
    
<script src="/libs/cryptojs/crypto-js.min.js"></script>
<script>
    (function() {
        let pwd = '';
        if (pwd && pwd.length > 0) {
            if (pwd !== CryptoJS.SHA256(prompt('请输入访问本文章的密码')).toString(CryptoJS.enc.Hex)) {
                alert('密码错误，将返回主页！');
                location.href = '/';
            }
        }
    })();
</script>




<div class="bg-cover pd-header post-cover" style="background-image: url('/medias/featureimages/0.jpg')">
    <div class="container">
        <div class="row">
            <div class="col s12 m12 l12">
                <div class="brand">
                    <div class="description center-align post-title">
                        js里数组常用的方法
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<main class="post-container content">

    
    <link rel="stylesheet" href="/libs/tocbot/tocbot.css">
<style>
    #articleContent h1::before,
    #articleContent h2::before,
    #articleContent h3::before,
    #articleContent h4::before,
    #articleContent h5::before,
    #articleContent h6::before {
        display: block;
        content: " ";
        height: 100px;
        margin-top: -100px;
        visibility: hidden;
    }

    #articleContent :focus {
        outline: none;
    }

    .toc-fixed {
        position: fixed;
        top: 64px;
    }

    .toc-widget {
        padding-left: 20px;
    }

    .toc-widget .toc-title {
        margin: 35px 0 15px 0;
        padding-left: 17px;
        font-size: 1.5rem;
        font-weight: bold;
        line-height: 1.5rem;
    }

    .toc-widget ol {
        padding: 0;
        list-style: none;
    }

    #toc-content ol {
        padding-left: 10px;
    }

    #toc-content ol li {
        padding-left: 10px;
    }

    #toc-content .toc-link:hover {
        color: #42b983;
        font-weight: 700;
        text-decoration: underline;
    }

    #toc-content .toc-link::before {
        background-color: transparent;
        max-height: 25px;
    }

    #toc-content .is-active-link {
        color: #42b983;
    }

    #toc-content .is-active-link::before {
        background-color: #42b983;
    }

    #floating-toc-btn {
        position: fixed;
        right: 20px;
        bottom: 76px;
        padding-top: 15px;
        margin-bottom: 0;
        z-index: 998;
    }

    #floating-toc-btn .btn-floating {
        width: 48px;
        height: 48px;
    }

    #floating-toc-btn .btn-floating i {
        line-height: 48px;
        font-size: 1.4rem;
    }
</style>
<div class="row">
    <div id="main-content" class="col s12 m12 l9">
        <!-- shw2018 洪卫  modify 2019.08.15-->
<!-- 文章内容详情 -->
<div id="artDetail">
    <div class="card">
        <div class="card-content article-info">
            <div class="row tag-cate">
                <div class="col s7">
                    
                    <div class="article-tag">
                        
                            <a href="/tags/前端/" target="_blank">
                                <span class="chip bg-color">前端</span>
                            </a>
                        
                            <a href="/tags/JavaScript/" target="_blank">
                                <span class="chip bg-color">JavaScript</span>
                            </a>
                        
                    </div>
                    
                </div>
                <div class="col s5 right-align">
                    
                    <div class="post-cate">
                        <i class="fa fa-bookmark fa-fw icon-category"></i>
                        
                            <a href="/categories/JavaScript/" class="post-category" target="_blank">
                                JavaScript
                            </a>
                        
                    </div>
                    
                </div>
            </div>
            
            <div class="post-info">
                <div class="post-date info-break-policy">
                    <i class="fa fa-calendar-minus-o fa-fw"></i>发布日期:&nbsp;&nbsp;
                    2020-07-27
                </div>

                <div class="post-author info-break-policy">
                    <i class="fa fa-user-o fa-fw"></i>作者:&nbsp;&nbsp;
                    
                        xiaoming
                    
                </div>

                
                    
                    <div class="info-break-policy">
                        <i class="fa fa-file-word-o fa-fw"></i>文章字数:&nbsp;&nbsp;
                        2.4k
                    </div>
                    

                    
                    <div class="info-break-policy">
                        <i class="fa fa-clock-o fa-fw"></i>阅读时长:&nbsp;&nbsp;
                        10 分
                    </div>
                    
                
                
                
                        <span id="busuanzi_container_site_pv" style='display:none'></span>
                        <i class="fa fa-eye fa-fw"></i>阅读次数:&nbsp;&nbsp;
                        <span id="busuanzi_value_page_pv" ></span>
    
                

            </div>
        </div>
        <hr class="clearfix">
        <div class="card-content article-card-content">
            <div id="articleContent">
                <h1 id="js-里数组常用的方法"><a href="#js-里数组常用的方法" class="headerlink" title="js 里数组常用的方法"></a>js 里数组常用的方法</h1><h3 id="concat方法"><a href="#concat方法" class="headerlink" title="concat方法"></a>concat方法</h3><blockquote>
<p><strong>concat方法不会改变原数组，会返回一个拼接后的新数组。</strong></p>
</blockquote>
<pre class="line-numbers language-bash"><code class="language-bash">var arr1<span class="token operator">=</span> <span class="token punctuation">[</span>1,2,3<span class="token punctuation">]</span><span class="token punctuation">;</span>
var arr2<span class="token operator">=</span><span class="token punctuation">[</span>3,4<span class="token punctuation">]</span><span class="token punctuation">;</span>
arr1.concat<span class="token punctuation">(</span>arr2<span class="token punctuation">)</span><span class="token punctuation">;</span>
console.log<span class="token punctuation">(</span>arr1.length<span class="token punctuation">)</span><span class="token punctuation">;</span>  //3
console.log<span class="token punctuation">(</span>arr1<span class="token punctuation">)</span><span class="token punctuation">;</span>   // <span class="token punctuation">[</span>1,2,3<span class="token punctuation">]</span>
console.log<span class="token punctuation">(</span>arr2<span class="token punctuation">)</span><span class="token punctuation">;</span>   // <span class="token punctuation">[</span>3,4<span class="token punctuation">]</span>
console.log<span class="token punctuation">(</span>arr1.concat<span class="token punctuation">(</span>arr2<span class="token punctuation">))</span><span class="token punctuation">;</span>   // <span class="token punctuation">[</span>1,2,3,3,4<span class="token punctuation">]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h3 id="join-方法"><a href="#join-方法" class="headerlink" title="join 方法"></a>join 方法</h3><blockquote>
<p><strong>join方法不会改变原数组，join()方法将一个数组（或一个类数组对象）的所有元素根据传入的参数连接成一个字符串，并返回这个字符串。</strong></p>
</blockquote>
<pre class="line-numbers language-bash"><code class="language-bash">var arr <span class="token operator">=</span> <span class="token punctuation">[</span>1,2,3,4,5<span class="token punctuation">]</span><span class="token punctuation">;</span>
arr.join<span class="token punctuation">(</span><span class="token string">','</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console.log<span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span>     // <span class="token punctuation">[</span>1,2,3,4,5<span class="token punctuation">]</span>
console.log<span class="token punctuation">(</span>arr.join<span class="token punctuation">(</span><span class="token string">','</span><span class="token punctuation">))</span><span class="token punctuation">;</span>    // <span class="token string">'1,2,3,4,5'</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>
<h3 id="push方法和pop方法"><a href="#push方法和pop方法" class="headerlink" title="push方法和pop方法"></a>push方法和pop方法</h3><blockquote>
<p><strong>push方法和pop方法会改变原数组，push方法用于向数组最末尾的位置添加新元素，pop方法用于删除数组最末尾的那个元素。</strong></p>
</blockquote>
<pre class="line-numbers language-bash"><code class="language-bash">var arr <span class="token operator">=</span> <span class="token punctuation">[</span>1, 2, 3, 4, 5<span class="token punctuation">]</span><span class="token punctuation">;</span>
arr.push<span class="token punctuation">(</span>6,7<span class="token punctuation">)</span><span class="token punctuation">;</span>
console.log<span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span>   // <span class="token punctuation">[</span>1,2,3,4,5,6,7<span class="token punctuation">]</span>
console.log<span class="token punctuation">(</span>arr.push<span class="token punctuation">(</span>6,7<span class="token punctuation">))</span><span class="token punctuation">;</span>   //9
arr.pop<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console.log<span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span>   //<span class="token punctuation">[</span>1,2,3,4,5,6,7,6<span class="token punctuation">]</span>
console.log<span class="token punctuation">(</span>arr.pop<span class="token punctuation">(</span><span class="token punctuation">))</span><span class="token punctuation">;</span>   //6<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h3 id="unshift方法和shift方法"><a href="#unshift方法和shift方法" class="headerlink" title="unshift方法和shift方法"></a>unshift方法和shift方法</h3><blockquote>
<p><strong>unshift方法和shift方法会改变原数组，unshift方法用于在数组第一个元素(下标为0)的前面的位置添加新元素，shift方法用于删除数组第一个元素(下标为0)的位置的元素。</strong></p>
</blockquote>
<pre class="line-numbers language-bash"><code class="language-bash">var arr <span class="token operator">=</span> <span class="token punctuation">[</span>1, 2, 3, 4, 5<span class="token punctuation">]</span><span class="token punctuation">;</span>
arr.shift<span class="token punctuation">(</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
console.log<span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span>   // <span class="token punctuation">[</span>2,3,4,5<span class="token punctuation">]</span>
console.log<span class="token punctuation">(</span>arr.length<span class="token punctuation">)</span><span class="token punctuation">;</span>   // 4
arr.unshift<span class="token punctuation">(</span>6<span class="token punctuation">)</span><span class="token punctuation">;</span>
console.log<span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span>   // <span class="token punctuation">[</span>6,2,3,4,5<span class="token punctuation">]</span>
console.log<span class="token punctuation">(</span>arr.length<span class="token punctuation">)</span><span class="token punctuation">;</span>   // 5<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h3 id="sort方法"><a href="#sort方法" class="headerlink" title="sort方法"></a>sort方法</h3><blockquote>
<p><strong>sort方法会改变数组，用于对数组元素进行排序。默认采用正排序，即小的数排在前面。sort( )可以接受一个比较函数作为参数，以便我们指定哪个值在哪个值前面。比较函数接受两个参数，如果第一个参数位于第二个参数之前就返回负数，两参数相等返回0，如果第一个参数位于第二个参数之后就返回正数，这个比较函数适用于大多数数据类型，只要将其作为参数传给sort( )即可。</strong></p>
</blockquote>
<pre class="line-numbers language-bash"><code class="language-bash">var arr<span class="token operator">=</span><span class="token punctuation">[</span>0,1,5,10,15<span class="token punctuation">]</span><span class="token punctuation">;</span>
arr.sort<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console.log<span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span>  // <span class="token punctuation">[</span>0,1,10,15,5<span class="token punctuation">]</span>

//sort接受一个比较函数作为参数
var arr <span class="token operator">=</span> <span class="token punctuation">[</span>21,1,3,45,2<span class="token punctuation">]</span><span class="token punctuation">;</span>
arr.sort<span class="token punctuation">(</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
console.log<span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span>   // <span class="token punctuation">[</span>1,2,21,3,45<span class="token punctuation">]</span>
arr.sort<span class="token punctuation">(</span>function<span class="token punctuation">(</span>a,b<span class="token punctuation">)</span><span class="token punctuation">{</span>
    if<span class="token punctuation">(</span>a<span class="token operator">&lt;</span>b<span class="token punctuation">)</span><span class="token punctuation">{</span>
       <span class="token keyword">return</span> -1<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>else if<span class="token punctuation">(</span>a <span class="token operator">></span>b<span class="token punctuation">)</span><span class="token punctuation">{</span>
       <span class="token keyword">return</span> 1<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>else<span class="token punctuation">{</span>
       <span class="token keyword">return</span> 0<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
console.log<span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span>   // <span class="token punctuation">[</span>1,2,3,21,45<span class="token punctuation">]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h3 id="reverse-方法"><a href="#reverse-方法" class="headerlink" title="reverse 方法"></a>reverse 方法</h3><blockquote>
<p><strong>reverse方法会改变数组，对数组元素倒置。</strong></p>
</blockquote>
<pre class="line-numbers language-bash"><code class="language-bash">var arr<span class="token operator">=</span><span class="token punctuation">[</span>21,1,3,45,2<span class="token punctuation">]</span><span class="token punctuation">;</span>
arr.reverse<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console.log<span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span>   //<span class="token punctuation">[</span>2,45,3,1,21<span class="token punctuation">]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>
<h3 id="slice-方法"><a href="#slice-方法" class="headerlink" title="slice 方法"></a>slice 方法</h3><blockquote>
<p><strong>slice方法不会改变原数组，会返回一个截取后的新数组。一般它有两个参数，slice(A,B)表示从数组的下标为A的地方开始截取，截取到下标为B的元素处为止，截取的元素包含A下标对应的元素但不包含B下标对应的元素。</strong></p>
</blockquote>
<pre class="line-numbers language-bash"><code class="language-bash">var arr <span class="token operator">=</span> <span class="token punctuation">[</span>1,2,3,4,5,6<span class="token punctuation">]</span><span class="token punctuation">;</span>
arr.slice<span class="token punctuation">(</span>1,4<span class="token punctuation">)</span><span class="token punctuation">;</span>  //从数组arr的下标1开始截取到下标4为止，截取的元素包含下标1对应的元素不包含下标4对应的元素
console.log<span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span>   // <span class="token punctuation">[</span>1, 2, 3, 4, 5, 6<span class="token punctuation">]</span>
console.log<span class="token punctuation">(</span>arr.length<span class="token punctuation">)</span><span class="token punctuation">;</span>   // 6
console.log<span class="token punctuation">(</span>arr.slice<span class="token punctuation">(</span>1,4<span class="token punctuation">))</span><span class="token punctuation">;</span>   // <span class="token punctuation">[</span>2, 3, 4<span class="token punctuation">]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h3 id="splice-方法"><a href="#splice-方法" class="headerlink" title="splice 方法"></a>splice 方法</h3><blockquote>
<p><strong>splice方法可用于删除元素、插入元素、替换元素，它会改变数组。splice方法用于删除时，只需要传入两个参数。比如splice(A,B)表示参数 A是删除第一项的位置，参数B是删除几项，并以数组形式返回被删除的部分。</strong></p>
</blockquote>
<pre class="line-numbers language-bash"><code class="language-bash">var arr <span class="token operator">=</span> <span class="token punctuation">[</span>1, 2, 3, 4, 5<span class="token punctuation">]</span><span class="token punctuation">;</span>
console.log<span class="token punctuation">(</span>arr.splice<span class="token punctuation">(</span>1,3<span class="token punctuation">))</span><span class="token punctuation">;</span>  //1表示要删除的第一项是下标为1,删除截止下标为3的位置,返回被删除的部分<span class="token punctuation">[</span>2, 3, 4<span class="token punctuation">]</span>
console.log<span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span>  // <span class="token punctuation">[</span>1, 5<span class="token punctuation">]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>
<blockquote>
<p><strong>splice方法用于插入元素时，只需要传入这三个参数:起始位置，0(要删除的项数)，要插入的项，插入时返回空数组。</strong></p>
</blockquote>
<pre class="line-numbers language-bash"><code class="language-bash">var arr1 <span class="token operator">=</span> <span class="token punctuation">[</span>1,2,3,4,5<span class="token punctuation">]</span><span class="token punctuation">;</span>
console.log<span class="token punctuation">(</span>arr1.splice<span class="token punctuation">(</span>1,0,7,8<span class="token punctuation">))</span><span class="token punctuation">;</span>   // <span class="token punctuation">[</span><span class="token punctuation">]</span> 插入时返回空数组
console.log<span class="token punctuation">(</span>arr1<span class="token punctuation">)</span><span class="token punctuation">;</span>   // <span class="token punctuation">[</span>1, 7, 8, 2, 3, 4, 5<span class="token punctuation">]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>
<blockquote>
<p><strong>splice方法用于替换元素时，只需要传入这三个参数:起始位置，要替换的项数，要替换的项，返回被替换掉的数。</strong></p>
</blockquote>
<pre class="line-numbers language-bash"><code class="language-bash">var arr2 <span class="token operator">=</span> <span class="token punctuation">[</span>1,2,3,4,5<span class="token punctuation">]</span><span class="token punctuation">;</span>
console.log<span class="token punctuation">(</span>arr2.splice<span class="token punctuation">(</span>1,1,7,8<span class="token punctuation">))</span><span class="token punctuation">;</span>   // <span class="token punctuation">[</span>2<span class="token punctuation">]</span> 返回被替换掉的数
console.log<span class="token punctuation">(</span>arr2<span class="token punctuation">)</span><span class="token punctuation">;</span>   // <span class="token punctuation">[</span>1, 7, 8, 3, 4, 5<span class="token punctuation">]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>
<h3 id="findIndex-方法"><a href="#findIndex-方法" class="headerlink" title="findIndex 方法"></a>findIndex 方法</h3><blockquote>
<p><strong>findIndex方法返回满足条件的元素对应的索引下标值。</strong></p>
</blockquote>
<pre class="line-numbers language-bash"><code class="language-bash">var arr <span class="token operator">=</span> <span class="token punctuation">[</span>10,3,4,5<span class="token punctuation">]</span><span class="token punctuation">;</span>
var a <span class="token operator">=</span> arr.findIndex<span class="token punctuation">(</span>function<span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">{</span>
   <span class="token keyword">return</span> item <span class="token operator">==</span> 3<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
console.log<span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span>  //1<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h3 id="find-方法"><a href="#find-方法" class="headerlink" title="find 方法"></a>find 方法</h3><blockquote>
<p><strong>find方法不会改变原数组，返回数组中满足提供的测试函数的第一个元素的值。</strong></p>
</blockquote>
<pre class="line-numbers language-bash"><code class="language-bash"><span class="token keyword">function</span> big<span class="token punctuation">(</span>element<span class="token punctuation">)</span><span class="token punctuation">{</span>
   <span class="token keyword">return</span> element <span class="token operator">>=</span> 2<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
var arr <span class="token operator">=</span> <span class="token punctuation">[</span>1,2,3,2,5<span class="token punctuation">]</span><span class="token punctuation">;</span>
var arr1 <span class="token operator">=</span> arr.find<span class="token punctuation">(</span>big<span class="token punctuation">)</span><span class="token punctuation">;</span>
console.log<span class="token punctuation">(</span>arr1<span class="token punctuation">)</span><span class="token punctuation">;</span>  //2
console.log<span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span>  // <span class="token punctuation">[</span>1,2,3,2,5<span class="token punctuation">]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h3 id="indexOf方法和lastIndexOf方法"><a href="#indexOf方法和lastIndexOf方法" class="headerlink" title="indexOf方法和lastIndexOf方法"></a>indexOf方法和lastIndexOf方法</h3><blockquote>
<p><strong>indexOf是从数组下标为0的地方开始往后查找，lastIndexOf是从数组最后一项往前查找，如果没查找到就返回-1，不会改变数组，返回指定数值的数组下标。</strong></p>
</blockquote>
<pre class="line-numbers language-bash"><code class="language-bash">var arr <span class="token operator">=</span> <span class="token punctuation">[</span>1, 2, 3, 2, 5<span class="token punctuation">]</span><span class="token punctuation">;</span>
console.log<span class="token punctuation">(</span>arr.indexOf<span class="token punctuation">(</span>2<span class="token punctuation">))</span><span class="token punctuation">;</span>  // 1 返回值为2的数组的下标
console.log<span class="token punctuation">(</span>arr.indexOf<span class="token punctuation">(</span>2,2<span class="token punctuation">))</span><span class="token punctuation">;</span>  // 3 第一个参数表示要查找的数，第二个参数表示查找起点位置的索引
console.log<span class="token punctuation">(</span>arr.indexOf<span class="token punctuation">(</span>6<span class="token punctuation">))</span><span class="token punctuation">;</span>  // -1
console.log<span class="token punctuation">(</span>arr.lastIndexOf<span class="token punctuation">(</span>2<span class="token punctuation">))</span><span class="token punctuation">;</span>  // 3 从数组的末尾开始向前查找，返回正序下标
console.log<span class="token punctuation">(</span>arr.lastIndexOf<span class="token punctuation">(</span>2,2<span class="token punctuation">))</span><span class="token punctuation">;</span>  // 1 从数组的末尾开始向前查找，返回正序下标<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h3 id="forEach-方法"><a href="#forEach-方法" class="headerlink" title="forEach 方法"></a>forEach 方法</h3><blockquote>
<p><strong>数组的forEach方法,回调函数的函数体没有返回值，也就是没有return. foreach的回调会让数组的每个元素都执行回调函数里函数体的东西。</strong></p>
</blockquote>
<pre class="line-numbers language-bash"><code class="language-bash">var arr<span class="token operator">=</span><span class="token punctuation">[</span>1,2,3<span class="token punctuation">]</span><span class="token punctuation">;</span>
arr.forEach<span class="token punctuation">(</span>function<span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">{</span>
   consolo.log<span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">;</span>
   consolo.log<span class="token punctuation">(</span><span class="token string">"————"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
结果如下:
1
__________

2
__________

3
__________<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h3 id="some-方法"><a href="#some-方法" class="headerlink" title="some 方法"></a>some 方法</h3><blockquote>
<p><strong>数组的some方法:数组的每个元素都会依次执行函数体里的东西，只要有一个满足条件表达式就会返回true，没有满足条件的就返回false。</strong></p>
</blockquote>
<pre class="line-numbers language-bash"><code class="language-bash">var ages <span class="token operator">=</span> <span class="token punctuation">[</span>3，10，18，20<span class="token punctuation">]</span>；
var ceshi <span class="token operator">=</span> ages.some<span class="token punctuation">(</span>function<span class="token punctuation">(</span>age<span class="token punctuation">)</span><span class="token punctuation">{</span>
   <span class="token keyword">return</span> age<span class="token operator">></span>15
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console.log<span class="token punctuation">(</span>ceshi<span class="token punctuation">)</span><span class="token punctuation">;</span>  // <span class="token boolean">true</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h3 id="every-方法"><a href="#every-方法" class="headerlink" title="every 方法"></a>every 方法</h3><blockquote>
<p><strong>数组的every方法:数组的每个元素都会依次执行函数体里的东西，所有元素全部满足条件表达式就会返回true，只要有一个不满足条件的就返回false。</strong></p>
</blockquote>
<pre class="line-numbers language-bash"><code class="language-bash">var ages <span class="token operator">=</span> <span class="token punctuation">[</span>3，10，18，20<span class="token punctuation">]</span>；
var ceshi <span class="token operator">=</span> ages.every<span class="token punctuation">(</span>function<span class="token punctuation">(</span>age<span class="token punctuation">)</span><span class="token punctuation">{</span>
   <span class="token keyword">return</span> age<span class="token operator">></span>15
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console.log<span class="token punctuation">(</span>ceshi<span class="token punctuation">)</span><span class="token punctuation">;</span>   // <span class="token boolean">false</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h3 id="filter-方法"><a href="#filter-方法" class="headerlink" title="filter 方法"></a>filter 方法</h3><blockquote>
<p><strong>数组的filter方法:返回符合函数体里条件的新数组，它不会改变原数组。</strong></p>
</blockquote>
<pre class="line-numbers language-bash"><code class="language-bash">var arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>id:1, flag:true<span class="token punctuation">}</span>,<span class="token punctuation">{</span>id:2,flag:false<span class="token punctuation">}</span>,<span class="token punctuation">{</span>id:3, flag:true<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
var newArr <span class="token operator">=</span> arr.filter<span class="token punctuation">(</span>obj <span class="token operator">=</span><span class="token operator">></span> <span class="token operator">!</span>obj.flag<span class="token punctuation">)</span><span class="token punctuation">;</span>  // 筛选出所有的flag为false的对象
console.log<span class="token punctuation">(</span>newArr<span class="token punctuation">)</span><span class="token punctuation">;</span>   // <span class="token punctuation">[</span><span class="token punctuation">{</span>id:2,flag:false<span class="token punctuation">}</span><span class="token punctuation">]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>
<h3 id="map-方法"><a href="#map-方法" class="headerlink" title="map 方法"></a>map 方法</h3><blockquote>
<p><strong>数组的map方法:返回一个新数组，新数组中的元素为原始数组中的每个元素调用函数处理后得到的值。看下例，找出下例里，数组对象里含有flag属性且flag值为true的对象。</strong></p>
</blockquote>
<pre class="line-numbers language-bash"><code class="language-bash">var arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>id:1, flag:true<span class="token punctuation">}</span>,<span class="token punctuation">{</span>id:2,flag:false<span class="token punctuation">}</span>,<span class="token punctuation">{</span>id:3<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
var newArr <span class="token operator">=</span> arr.map<span class="token punctuation">(</span>ob <span class="token operator">=</span><span class="token operator">></span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> “flag” <span class="token keyword">in</span> ob <span class="token operator">&amp;&amp;</span> ob.flag<span class="token operator">==</span>true
<span class="token punctuation">}</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
console.log<span class="token punctuation">(</span>newArr<span class="token punctuation">)</span><span class="token punctuation">;</span>   // <span class="token punctuation">[</span><span class="token punctuation">{</span>id:1,flag:true<span class="token punctuation">}</span><span class="token punctuation">]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h3 id="includes-方法"><a href="#includes-方法" class="headerlink" title="includes 方法"></a>includes 方法</h3><blockquote>
<p><strong>includes方法用来判断一个数组是否包含一个指定的值，返回 true或 false。</strong></p>
</blockquote>
<pre class="line-numbers language-bash"><code class="language-bash">var arr <span class="token operator">=</span> <span class="token punctuation">[</span>1, 2, 3, 2, 5<span class="token punctuation">]</span><span class="token punctuation">;</span>
console.log<span class="token punctuation">(</span>arr.includes<span class="token punctuation">(</span>2<span class="token punctuation">))</span><span class="token punctuation">;</span>   // <span class="token boolean">true</span>
console.log<span class="token punctuation">(</span>arr.includes<span class="token punctuation">(</span>6<span class="token punctuation">))</span><span class="token punctuation">;</span>   // <span class="token boolean">false</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>
<h3 id="toString-方法"><a href="#toString-方法" class="headerlink" title="toString 方法"></a>toString 方法</h3><blockquote>
<p><strong>toString方法不会改变原数组，返回一个字符串，表示指定的数组及其元素。</strong></p>
</blockquote>
<pre class="line-numbers language-bash"><code class="language-bash">var arr <span class="token operator">=</span> <span class="token punctuation">[</span>1,2,3<span class="token punctuation">]</span><span class="token punctuation">;</span>
arr.toString<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console.log<span class="token punctuation">(</span>arr.toString<span class="token punctuation">(</span><span class="token punctuation">))</span><span class="token punctuation">;</span>   // <span class="token string">'1,2,3'</span>
console.log<span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span>   // <span class="token punctuation">[</span>1, 2, 3<span class="token punctuation">]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>
<h3 id="reduce-方法"><a href="#reduce-方法" class="headerlink" title="reduce 方法"></a>reduce 方法</h3><blockquote>
<p><strong>reduce方法不会改变原数组，迭代数组的所有项，然后构建一个最终返回的值，从数组的第一项开始，逐个遍历到最后。</strong></p>
</blockquote>
<pre class="line-numbers language-bash"><code class="language-bash">var arr <span class="token operator">=</span> <span class="token punctuation">[</span>1, 2, 3, 2, 5<span class="token punctuation">]</span><span class="token punctuation">;</span>
// reduce方法有两个参数：在每一项上调用的函数和（可选的）作为归并基础的初始值
// reduce方法的函数接收 4 个参数：前一个值、当前值、项的索引和数组对象
// 这个函数返回的任何值都会作为第一个参数自动传给下一项
// 第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数是数组的第二项
var <span class="token function">sum</span> <span class="token operator">=</span> arr.reduce<span class="token punctuation">(</span>function<span class="token punctuation">(</span>pre, cur, index, array<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> pre + cur<span class="token punctuation">;</span>
<span class="token punctuation">}</span>, 10<span class="token punctuation">)</span>
console.log<span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span>   // <span class="token punctuation">[</span>1, 2, 3, 2, 5<span class="token punctuation">]</span>
console.log<span class="token punctuation">(</span>sum<span class="token punctuation">)</span><span class="token punctuation">;</span>   // 23<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h3 id="reduceRight-方法"><a href="#reduceRight-方法" class="headerlink" title="reduceRight 方法"></a>reduceRight 方法</h3><blockquote>
<p><strong>reduceRight方法不会改变原数组，迭代数组的所有项，从数组的最后一项开始，向前遍历到第一项。</strong></p>
</blockquote>
<pre class="line-numbers language-bash"><code class="language-bash">var arr <span class="token operator">=</span> <span class="token punctuation">[</span>1, 2, 3, 2, 5<span class="token punctuation">]</span><span class="token punctuation">;</span>
var <span class="token function">sum</span> <span class="token operator">=</span> arr.reduceRight<span class="token punctuation">(</span>function<span class="token punctuation">(</span>pre, cur, index, array<span class="token punctuation">)</span> <span class="token punctuation">{</span>
   <span class="token keyword">return</span> pre + cur<span class="token punctuation">;</span>
<span class="token punctuation">}</span>, 10<span class="token punctuation">)</span>
console.log<span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span>   // <span class="token punctuation">[</span>1, 2, 3, 2, 5<span class="token punctuation">]</span>
console.log<span class="token punctuation">(</span>sum<span class="token punctuation">)</span><span class="token punctuation">;</span>   // 23<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h3 id="flat-方法"><a href="#flat-方法" class="headerlink" title="flat 方法"></a>flat 方法</h3><blockquote>
<p><strong>数组的flat方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。语法如下：var newArray = arr.flat( [ depth ] ); depth指定要提取嵌套数组的结构深度，默认值为 1。返回值是一个包含将数组与子数组中所有元素的新数组。扁平化数组就是将多维数组转变为一维数组的过程。</strong></p>
</blockquote>
<pre class="line-numbers language-bash"><code class="language-bash">var arr1 <span class="token operator">=</span> <span class="token punctuation">[</span>1, 2, <span class="token punctuation">[</span>3, 4<span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
console.log<span class="token punctuation">(</span> arr1.flat<span class="token punctuation">(</span><span class="token punctuation">))</span><span class="token punctuation">;</span>   // <span class="token punctuation">[</span>1, 2, 3, 4<span class="token punctuation">]</span>

var arr2 <span class="token operator">=</span> <span class="token punctuation">[</span>1, 2, <span class="token punctuation">[</span>3, 4, <span class="token punctuation">[</span>5, 6<span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
console.log<span class="token punctuation">(</span> arr2.flat<span class="token punctuation">(</span><span class="token punctuation">))</span><span class="token punctuation">;</span>   // <span class="token punctuation">[</span>1, 2, 3, 4, <span class="token punctuation">[</span>5, 6<span class="token punctuation">]</span><span class="token punctuation">]</span>

var arr3 <span class="token operator">=</span> <span class="token punctuation">[</span>1, 2, <span class="token punctuation">[</span>3, 4, <span class="token punctuation">[</span>5, 6<span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
console.log<span class="token punctuation">(</span> arr3.flat<span class="token punctuation">(</span>2<span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>    // <span class="token punctuation">[</span>1, 2, 3, 4, 5, 6<span class="token punctuation">]</span>

//使用 Infinity，可展开任意深度的嵌套数组
var arr4 <span class="token operator">=</span> <span class="token punctuation">[</span>1, 2, <span class="token punctuation">[</span>3, 4, <span class="token punctuation">[</span>5, 6, <span class="token punctuation">[</span>7, 8, <span class="token punctuation">[</span>9, 10<span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
console.log<span class="token punctuation">(</span> arr4.flat<span class="token punctuation">(</span>Infinity<span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>   // <span class="token punctuation">[</span>1, 2, 3, 4, 5, 6, 7, 8, 9, 10<span class="token punctuation">]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<script>
        document.querySelectorAll('.github-emoji')
          .forEach(el => {
            if (!el.dataset.src) { return; }
            const img = document.createElement('img');
            img.style = 'display:none !important;';
            img.src = el.dataset.src;
            img.addEventListener('error', () => {
              img.remove();
              el.style.color = 'inherit';
              el.style.backgroundImage = 'none';
              el.style.background = 'none';
            });
            img.addEventListener('load', () => {
              img.remove();
            });
            document.body.appendChild(img);
          });
      </script>
            </div>
            <hr/>

            
            <style>
    #reward {
        margin: 40px 0;
        text-align: center;
    }

    #reward .reward-link {
        font-size: 1.88rem;
    }

    #reward .btn-floating:hover {
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2), 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    #rewardModal {
        width: 320px;
        height: 350px;
    }

    #rewardModal .reward-title {
        margin: 15px auto;
        padding-bottom: 5px;
    }

    #rewardModal .modal-content {
        padding: 10px;
    }

    #rewardModal .close {
        position: absolute;
        right: 15px;
        top: 15px;
        color: rgba(0, 0, 0, 0.5);
        font-size: 1.3rem;
        line-height: 20px;
        cursor: pointer;
    }

    #rewardModal .close:hover {
        color: #ef5350;
        transform: scale(1.3);
        -moz-transform:scale(1.3);
        -webkit-transform:scale(1.3);
        -o-transform:scale(1.3);
    }

    #rewardModal .reward-tabs {
        margin: 0 auto;
        width: 210px;
    }

    .reward-tabs .tabs {
        height: 38px;
        margin: 10px auto;
        padding-left: 0;
    }

    .reward-content ul {
        padding-left: 0 !important;
    }

    .reward-tabs .tabs .tab {
        height: 38px;
        line-height: 38px;
    }

    .reward-tabs .tab a {
        color: #fff;
        background-color: #ccc;
    }

    .reward-tabs .tab a:hover {
        background-color: #ccc;
        color: #fff;
    }

    .reward-tabs .wechat-tab .active {
        color: #fff !important;
        background-color: #22AB38 !important;
    }

    .reward-tabs .alipay-tab .active {
        color: #fff !important;
        background-color: #019FE8 !important;
    }

    .reward-tabs .reward-img {
        width: 210px;
        height: 210px;
    }
</style>

<div id="reward">
    <a href="#rewardModal" class="reward-link modal-trigger btn-floating btn-large waves-effect waves-light red">赏</a>

    <!-- Modal Structure -->
    <div id="rewardModal" class="modal">
        <div class="modal-content">
            <a class="close modal-close"><i class="fa fa-close"></i></a>
            <h4 class="reward-title">你的赏识是我前进的动力!</h4>
            <div class="reward-content">
                <div class="reward-tabs">
                    <ul class="tabs row">
                        <li class="tab col s6 alipay-tab waves-effect waves-light"><a href="#alipay">支付宝</a></li>
                        <li class="tab col s6 wechat-tab waves-effect waves-light"><a href="#wechat">微 信</a></li>
                    </ul>
                    <div id="alipay">
                        <img src="/medias/reward/alipay.bmp" class="reward-img" alt="支付宝打赏二维码">
                    </div>
                    <div id="wechat">
                        <img src="/medias/reward/wechat.bmp" class="reward-img" alt="微信打赏二维码">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        $('.tabs').tabs();
    });
</script>
            

            <link rel="stylesheet" type="text/css" href="/libs/share/css/share.min.css">

<div id="article-share">
    
    <div class="social-share" data-disabled="qzone" data-wechat-qrcode-helper="<p>微信里点“发现”->“扫一扫”二维码便可查看分享。</p>"></div>
    
</div>

<script src="/libs/share/js/social-share.min.js"></script>

            
            
            
            <div class="reprint1">
                <p>
                    <span class="reprint1-tip">
                        <i class="fa fa-exclamation-circle"></i>&nbsp;&nbsp;转载请注明:
                    </span>
                    <a href="http://xiaomingblog.gitee.io" class="b-link-green">小明</a>
                    <i class="fa fa-angle-right fa-lg fa-fw text-color"></i>
                    <a href="/2020/07/27/javascript/" class="b-link-green">js里数组常用的方法</a>
                </p>
            </div>

        </div>
    </div>

    

    

    

    

    
        <style>
    .valine-card {
        margin: 1.5rem auto;
    }

    .valine-card .card-content {
        padding: 20px 20px 5px 20px;
    }
    /* valine 评论框增加背景图片 */
    #vcomments textarea {
        box-sizing: border-box;
        background: url("") 100% 100% no-repeat;
    }

    #vcomments input[type=text],
    #vcomments input[type=email],
    #vcomments input[type=url],
    #vcomments textarea {
        box-sizing: border-box;
    }

    #vcomments p {
        margin: 2px 2px 10px;
        font-size: 1.05rem;
        line-height: 1.78rem;
    }

    #vcomments blockquote p {
        text-indent: 0.2rem;
    }

    #vcomments a {
        padding: 0 2px;
        color: #42b983;
        font-weight: 500;
        text-decoration: underline;
    }

    #vcomments img {
        max-width: 100%;
        height: auto;
        cursor: pointer;
    }

    #vcomments ol li {
        list-style-type: decimal;
    }

    #vcomments ol,
    ul {
        display: block;
        padding-left: 2em;
        word-spacing: 0.05rem;
    }

    #vcomments ul li,
    ol li {
        display: list-item;
        line-height: 1.8rem;
        font-size: 1rem;
    }

    #vcomments ul li {
        list-style-type: disc;
    }

    #vcomments ul ul li {
        list-style-type: circle;
    }

    #vcomments table, th, td {
        padding: 12px 13px;
        border: 1px solid #dfe2e5;
    }

    #vcomments table, th, td {
        border: 0;
    }

    table tr:nth-child(2n), thead {
        background-color: #fafafa;
    }

    #vcomments table th {
        background-color: #f2f2f2;
        min-width: 80px;
    }

    #vcomments table td {
        min-width: 80px;
    }

    #vcomments h1 {
        font-size: 1.85rem;
        font-weight: bold;
        line-height: 2.2rem;
    }

    #vcomments h2 {
        font-size: 1.65rem;
        font-weight: bold;
        line-height: 1.9rem;
    }

    #vcomments h3 {
        font-size: 1.45rem;
        font-weight: bold;
        line-height: 1.7rem;
    }

    #vcomments h4 {
        font-size: 1.25rem;
        font-weight: bold;
        line-height: 1.5rem;
    }

    #vcomments h5 {
        font-size: 1.1rem;
        font-weight: bold;
        line-height: 1.4rem;
    }

    #vcomments h6 {
        font-size: 1rem;
        line-height: 1.3rem;
    }

    #vcomments p {
        font-size: 1rem;
        line-height: 1.5rem;
    }

    #vcomments hr {
        margin: 12px 0;
        border: 0;
        border-top: 1px solid #ccc;
    }

    #vcomments blockquote {
        margin: 15px 0;
        border-left: 5px solid #42b983;
        padding: 1rem 0.8rem 0.3rem 0.8rem;
        color: #666;
        background-color: rgba(66, 185, 131, .1);
    }

    #vcomments pre {
        font-family: monospace, monospace;
        padding: 1.2em;
        margin: .5em 0;
        background: #272822;
        overflow: auto;
        border-radius: 0.3em;
        tab-size: 4;
    }

    #vcomments code {
        font-family: monospace, monospace;
        padding: 1px 3px;
        font-size: 0.92rem;
        color: #e96900;
        background-color: #f8f8f8;
        border-radius: 2px;
    }

    #vcomments pre code {
        font-family: monospace, monospace;
        padding: 0;
        color: #e8eaf6;
        background-color: #272822;
    }

    #vcomments pre[class*="language-"] {
        padding: 1.2em;
        margin: .5em 0;
    }

    #vcomments code[class*="language-"],
    pre[class*="language-"] {
        color: #e8eaf6;
    }

    #vcomments [type="checkbox"]:not(:checked), [type="checkbox"]:checked {
        position: inherit;
        margin-left: -1.3rem;
        margin-right: 0.4rem;
        margin-top: -1px;
        vertical-align: middle;
        left: unset;
        visibility: visible;
    }

    #vcomments b,
    strong {
        font-weight: bold;
    }

    #vcomments dfn {
        font-style: italic;
    }

    #vcomments small {
        font-size: 85%;
    }

    #vcomments cite {
        font-style: normal;
    }

    #vcomments mark {
        background-color: #fcf8e3;
        padding: .2em;
    }

    #vcomments table, th, td {
        padding: 12px 13px;
        border: 1px solid #dfe2e5;
    }

    table tr:nth-child(2n), thead {
        background-color: #fafafa;
    }

    #vcomments table th {
        background-color: #f2f2f2;
        min-width: 80px;
    }

    #vcomments table td {
        min-width: 80px;
    }

    #vcomments [type="checkbox"]:not(:checked), [type="checkbox"]:checked {
        position: inherit;
        margin-left: -1.3rem;
        margin-right: 0.4rem;
        margin-top: -1px;
        vertical-align: middle;
        left: unset;
        visibility: visible;
    }

    /* 修复评论第一行位置错位 */
    .v .vlist .vcard {
    padding-top: 2.5em !important ;
    }
</style>

<div class="card valine-card" data-aos="fade-up">
    <div id="vcomments" class="card-content"></div>
</div>

<script src="/libs/valine/av-min.js"></script>
<script src="/libs/valine/Valine.min.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="/libs//libs/jQuery-emoji/dist/css/jquery.emoji.css">
<script src="/libs//libs/jQuery-emoji/dist/js/jquery.emoji.min.js"></script>
<script src="/libs//libs/jQuery-emoji/dist/js/emoji.list.js"></script> -->
<script>
    new Valine({
        el: '#vcomments',
        appId: 'hGWFxKUwFO4pt3bFt3Lc4jIE-gzGzoHsz',
        appKey: 'YrkR2bB2P6y20Wy82oSqTFRP',
        notify: 'false' === 'true',
        verify: 'false' === 'true',
        visitor: 'true' === 'true',
        avatar: 'mm',
        pageSize: '10',
        lang: 'zh-cn',
        placeholder: '自古评论出人才',

    });

//     function parse_emoji() {
//     jQuery(".vcontent").emojiParse({
//       basePath: '/libs/jQuery-emoji/images/emoji',
//       icons: emojiLists   // 注：详见 js/emoji.list.js
//     });
//   }
  
//   setTimeout(function() {
//     // jQuery emoji 解析
//     parse_emoji();
//     // jquery emoji 初始化
//     jQuery(".veditor").emoji({
//       showTab: true,
//       animation: 'slide',
//       basePath: '/libs/jQuery-emoji/images/emoji',
//       icons: emojiLists  // 注：详见 js/emoji.list.js
//     });
//     jQuery(".vmore").on("click", function() {
//       setTimeout(function() {
//         parse_emoji();
//       }, 500);
//     });
//   }, 800)

</script>
    

    

<article id="prenext-posts" class="prev-next articles">
    <div class="row article-row">
        
        <div class="article col s12 m6" data-aos="fade-up" data-aos="fade-up">
            <div class="article-badge left-badge text-color">
                <i class="fa fa-dot-circle-o"></i>&nbsp;本篇
            </div>
            <div class="card">
                <a href="/2020/07/27/javascript/">
                    <div class="card-image">
                        
                        <img src="/medias/featureimages/0.jpg" class="responsive-img" alt="js里数组常用的方法">
                        
                        <span class="card-title">js里数组常用的方法</span>
                    </div>
                </a>
                <div class="card-content article-content">
                    <div class="summary block-with-text">
                        
                            js里数组的方法非常多，这里我列举出了工作中经常要用到的数组方法。
                        
                    </div>
                    <div class="publish-info">
                            <span class="publish-date">
                                <i class="fa fa-clock-o fa-fw icon-date"></i>2020-07-27
                            </span>
                        <span class="publish-author">
                            
                            <i class="fa fa-bookmark fa-fw icon-category"></i>
                            
                            <a href="/categories/JavaScript/" class="post-category" target="_blank">
                                    JavaScript
                                </a>
                            
                            
                        </span>
                    </div>
                </div>

                
                <div class="card-action article-tags">
                    
                    <a href="/tags/前端/" target="_blank">
                        <span class="chip bg-color">前端</span>
                    </a>
                    
                    <a href="/tags/JavaScript/" target="_blank">
                        <span class="chip bg-color">JavaScript</span>
                    </a>
                    
                </div>
                
            </div>
        </div>
        
        
        <div class="article col s12 m6" data-aos="fade-up">
            <div class="article-badge right-badge text-color">
                本篇&nbsp;<i class="fa fa-dot-circle-o"></i>
            </div>
            <div class="card">
                <a href="/2020/07/27/javascript/">
                    <div class="card-image">
                        
                        <img src="/medias/featureimages/0.jpg" class="responsive-img" alt="js里数组常用的方法">
                        
                        <span class="card-title">js里数组常用的方法</span>
                    </div>
                </a>
                <div class="card-content article-content">
                    <div class="summary block-with-text">
                        
                            js里数组的方法非常多，这里我列举出了工作中经常要用到的数组方法。
                        
                    </div>
                    <div class="publish-info">
                            <span class="publish-date">
                                <i class="fa fa-clock-o fa-fw icon-date"></i>2020-07-27
                            </span>
                        <span class="publish-author">
                            
                            <i class="fa fa-bookmark fa-fw icon-category"></i>
                            
                            <a href="/categories/JavaScript/" class="post-category" target="_blank">
                                    JavaScript
                                </a>
                            
                            
                        </span>
                    </div>
                </div>

                
                <div class="card-action article-tags">
                    
                    <a href="/tags/前端/" target="_blank">
                        <span class="chip bg-color">前端</span>
                    </a>
                    
                    <a href="/tags/JavaScript/" target="_blank">
                        <span class="chip bg-color">JavaScript</span>
                    </a>
                    
                </div>
                
            </div>
        </div>
        
    </div>
</article>
</div>


<script>
    $('#articleContent').on('copy', function (e) {
        // IE8 or earlier browser is 'undefined'
        if (typeof window.getSelection === 'undefined') return;

        var selection = window.getSelection();
        // if the selection is short let's not annoy our users.
        if (('' + selection).length < Number.parseInt('120')) {
            return;
        }

        // create a div outside of the visible area and fill it with the selected text.
        var bodyElement = document.getElementsByTagName('body')[0];
        var newdiv = document.createElement('div');
        newdiv.style.position = 'absolute';
        newdiv.style.left = '-99999px';
        bodyElement.appendChild(newdiv);
        newdiv.appendChild(selection.getRangeAt(0).cloneContents());

        // we need a <pre> tag workaround.
        // otherwise the text inside "pre" loses all the line breaks!
        if (selection.getRangeAt(0).commonAncestorContainer.nodeName === 'PRE') {
            newdiv.innerHTML = "<pre>" + newdiv.innerHTML + "</pre>";
        }

        var url = document.location.href;
        newdiv.innerHTML += '<br />'
            + '来源: 小明<br />'
            + '作者: 小明<br />'
            + '链接: <a href="' + url + '">' + url + '</a><br />'
            + '本文章著作权归作者所有，任何形式的转载都请注明出处。';

        selection.selectAllChildren(newdiv);
        window.setTimeout(function () {bodyElement.removeChild(newdiv);}, 200);
    });
</script>


    </div>
    <div id="toc-aside" class="expanded col l3 hide-on-med-and-down">
        <div class="toc-widget">
            <div class="toc-title"><i class="fa fa-list-alt"></i>&nbsp;&nbsp;目录</div>
            <div id="toc-content"></div>
        </div>
    </div>
</div>

<!-- TOC 悬浮按钮. -->

<div id="floating-toc-btn" class="hide-on-med-and-down">
    <a class="btn-floating btn-large bg-color">
        <i class="fa fa-list"></i>
    </a>
</div>


<script src="/libs/tocbot/tocbot.min.js"></script>
<script>
    $(function () {
        tocbot.init({
            tocSelector: '#toc-content',
            contentSelector: '#articleContent',
            headingsOffset: -($(window).height() * 0.4 - 45),
            // headingsOffset: -205,
            headingSelector: 'h1, h2, h3, h4, h5'
        });

        // modify the toc link href to support Chinese.
        let i = 0;
        let tocHeading = 'toc-heading-';
        $('#toc-content a').each(function () {
            $(this).attr('href', '#' + tocHeading + (++i));
        });

        // modify the heading title id to support Chinese.
        i = 0;
        $('#articleContent').children('h1, h2, h3, h4, h5').each(function () {
            $(this).attr('id', tocHeading + (++i));
        });

        // Set scroll toc fixed.
        let tocHeight = parseInt($(window).height() * 0.4 - 64);
        let $tocWidget = $('.toc-widget');
        $(window).scroll(function () {
            let scroll = $(window).scrollTop();
            /* add post toc fixed. */
            if (scroll > tocHeight) {
                $tocWidget.addClass('toc-fixed');
            } else {
                $tocWidget.removeClass('toc-fixed');
            }
        });

        
        /* 修复文章卡片 div 的宽度. */
        let fixPostCardWidth = function (srcId, targetId) {
            let srcDiv = $('#' + srcId);
            if (srcDiv.length === 0) {
                return;
            }

            let w = srcDiv.width();
            if (w >= 450) {
                w = w + 21;
            } else if (w >= 350 && w < 450) {
                w = w + 18;
            } else if (w >= 300 && w < 350) {
                w = w + 16;
            } else {
                w = w + 14;
            }
            $('#' + targetId).width(w);
        };

        // 切换TOC目录展开收缩的相关操作.
        const expandedClass = 'expanded';
        let $tocAside = $('#toc-aside');
        let $mainContent = $('#main-content');
        $('#floating-toc-btn .btn-floating').click(function () {
            if ($tocAside.hasClass(expandedClass)) {
                $tocAside.removeClass(expandedClass).slideUp(500);
                $mainContent.removeClass('l9');
            } else {
                $tocAside.addClass(expandedClass).slideDown(500);
                $mainContent.addClass('l9');
            }
            fixPostCardWidth('artDetail', 'prenext-posts');
        });
        
    });
</script>
    

</main>


    <footer class="page-footer bg-color">
    <div class="container row center-align">
        <div class="col s12 m8 l8 copy-right">
            Copyright&copy; 2019 xiaoming.

            <br>
            <span id="sitetime"></span><span class="my-face">ღゝ◡╹)ノ♡</span>
            <br>

            

            
            
            <span id="busuanzi_container_site_pv" style='display:none'></span>
            总访问量: <span id="busuanzi_value_site_pv" class="white-color"></span>
            

            
            <span id="busuanzi_container_site_uv" style='display:none'></span>
            人次&nbsp; | &nbsp;访客人数: <span id="busuanzi_value_site_uv" class="white-color"></span> 人
            

            

            
            &nbsp; | &nbsp;字数统计:&nbsp;
            <span class="white-color">2.4k</span> 字
            

            
            <br>

        </div>

        <div class="col s12 m4 l4 social-link social-statis">









<!-- 
<a href="/atom.xml" class="tooltipped" target="_blank" data-tooltip="RSS 订阅" data-position="top"
    data-delay="50">
   <i class="fa fa-rss"></i> 
</a>
 --></div>

    </div>
</footer>

<div class="progress-bar"></div>

<script language=javascript>
    function siteTime() {
        window.setTimeout("siteTime()", 1000);
        var seconds = 1000;
        var minutes = seconds * 60;
        var hours = minutes * 60;
        var days = hours * 24;
        var years = days * 365;
        var today = new Date();
        var todayYear = today.getFullYear();
        var todayMonth = today.getMonth() + 1;
        var todayDate = today.getDate();
        var todayHour = today.getHours();
        var todayMinute = today.getMinutes();
        var todaySecond = today.getSeconds();

        /* Date.UTC() -- 返回date对象距世界标准时间(UTC)1970年1月1日午夜之间的毫秒数(时间戳)
        year - 作为date对象的年份，为4位年份值
        month - 0-11之间的整数，做为date对象的月份
        day - 1-31之间的整数，做为date对象的天数
        hours - 0(午夜24点)-23之间的整数，做为date对象的小时数
        minutes - 0-59之间的整数，做为date对象的分钟数
        seconds - 0-59之间的整数，做为date对象的秒数
        microseconds - 0-999之间的整数，做为date对象的毫秒数 */

        var t1 = Date.UTC(2019, 08, 10, 00, 00, 00); //北京时间2019-8-1 00:00:00
        var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond);
        var diff = t2 - t1;
        var diffYears = Math.floor(diff / years);
        var diffDays = Math.floor((diff / days) - diffYears * 365);
        var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours);
        var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes);
        var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours - diffMinutes *
            minutes) / seconds);
        document.getElementById("sitetime").innerHTML = "本站已勉强运行 " + diffYears + " 年 " + diffDays + " 天 " + diffHours +
            " 小时 " + diffMinutes + " 分钟 " + diffSeconds + " 秒";
    } /*因为建站时间还没有一年，就将之注释掉了。需要的可以取消*/
    siteTime();
</script>

    <!-- 搜索遮罩框 -->
<div id="searchModal" class="modal">
    <div class="modal-content">
        <div class="search-header">
            <span class="title"><i class="fa fa-search"></i>&nbsp;&nbsp;搜索</span>
            <input type="search" id="searchInput" name="s" placeholder="请输入搜索的关键字"
                   class="search-input">
        </div>
        <div id="searchResult"></div>
    </div>
</div>

<script src="/js/search.js"></script>
<script type="text/javascript">
$(function () {
    searchFunc("/" + "search.xml", 'searchInput', 'searchResult');
});
</script>
    <!-- 回到顶部按钮 -->
<div id="backTop" class="top-scroll">
    <a class="btn-floating btn-large waves-effect waves-light" href="#!">
        <i class="fa fa-angle-up"></i>
    </a>
</div>


    <script src="https://cdn.bootcss.com/materialize/1.0.0/js/materialize.min.js"></script>
    <script src="https://cdn.bootcss.com/masonry/4.2.2/masonry.pkgd.min.js"></script>
    <script src="https://cdn.bootcss.com/aos/3.0.0-beta.6/aos.js"></script>
    <script src="https://cdn.bootcss.com/scrollprogress/3.0.2/scrollProgress.min.js"></script>
    <script src="https://cdn.bootcss.com/lightgallery/1.6.12/js/lightgallery-all.min.js"></script>
    <script src="/js/matery.js"></script>

    <!-- Global site tag (gtag.js) - Google Analytics -->



    
    <script src="/libs/others/clicklove.js"></script>
    

    
    <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    

    <!-- 洪卫 shw2018 add 2019.08.28 -->
    <script type="text/javascript">
        var OriginTitile = document.title,
            st;
        document.addEventListener("visibilitychange", function () {
            document.hidden ? (document.title = "看不见我🙈~看不见我🙈~", clearTimeout(st)) : (document.title =
                "(๑•̀ㅂ•́) ✧被发现了～", st = setTimeout(function () {
                    document.title = OriginTitile
                }, 3e3))
        })
    </script>

    <!-- 鼠标点击烟花爆炸效果  洪卫 shw2018 add 2019.09.09 -->
    
    <canvas class="fireworks" style="position: fixed; left: 0; top: 0; z-index: 1; pointer-events: none;"></canvas>
    <script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
    <script type="text/javascript" src="/js/fireworks.js"></script>
    

    <!-- 背景雪花飘落特效洪卫 shw2018 add 2019.09.10 -->
    
    <script type="text/javascript">
        //只在桌面版网页启用特效
        var windowWidth = $(window).width();
        if (windowWidth > 768) {
            document.write('<script type="text/javascript" src="/js/sakura.js"><\/script>');
        }
    </script>
    

    <!-- 鼠标点击文字特效 洪卫 shw2018 add 2019.09.10-->
    
    <script src="/js/wenzi.js" type="text/javascript"></script>
    

    <!-- 背景雪花飘落特效 洪卫 shw2018 add 2019.09.10 -->
    
    <script type="text/javascript">
        var windowWidth = $(window).width();
        if (windowWidth > 768) {
            document.write('<script type="text/javascript" src="/js/xuehuapiaoluo.js"><\/script>');
        }
    </script>
    

    <!-- 在线聊天工具  洪卫 shw2018 add 2019.09.11 -->
    
    <script src="//code.tidio.co/xxxxxxxxxxxxxxxxxxxxxxxxxxx.js"></script>
    <!--  在线聊天位置自定义  洪卫 shw2018 add 2019.09.13  -->
    <script>
        $(document).ready(function () {

            setInterval(change_Tidio, 50);
            function change_Tidio() {

                var tidio = $("#tidio-chat iframe");
                if (tidio.css("display") == "block" && $(window).width() > 977) {
                    document.getElementById("tidio-chat-iframe").style.bottom = ($("div#backTop.top-scroll").css("display") == "none" && $(window).width() > 977) > 0 ? "-40px" : ($("div.toc-title").length && $(window).width() > 977) > 0 ? "80px" : "20px";
                    document.getElementById("tidio-chat-iframe").style.right = "-15px";
                    document.getElementById("tidio-chat-iframe").style.height = parseInt(tidio.css("height")) >= 520 ? "520px" : tidio.css("height");
                    document.getElementById("tidio-chat-iframe").style.zIndex = "997";
                }
                else if (tidio.css("display") == "block" && $(window).width() > 601 && $(window).width() < 992) {
                    document.getElementById("tidio-chat-iframe").style.bottom = ($("div#backTop.top-scroll").css("display") == "none" && 601 < $(window).width() < 992) > 0 ? "-40px" : "20px";
                    document.getElementById("tidio-chat-iframe").style.right = "-15px";
                    document.getElementById("tidio-chat-iframe").style.zIndex = "997";
                }
                else if (tidio.css("display") == "block" && $(window).width() < 601 && parseInt(tidio.css("height")) < 230) {
                    document.getElementById("tidio-chat-iframe").style.bottom = ($("div#backTop.top-scroll").css("display") == "none" && $(window).width() < 601) > 0 ? "-10px" : "45px";
                    document.getElementById("tidio-chat-iframe").style.zIndex = "997";
                }

                if (tidio.css("display") == "block" && $(window).width() < 601 && parseInt(tidio.css("height")) >= 230) {
                    document.getElementById("tidio-chat-iframe").style.zIndex = "998";
                }
            }
        }); 
    </script>
    

    <!-- 背景 canvas-nest  洪卫 shw 2018  add 2019.09.15-->
    
    <script type="text/javascript">
        var windowWidth = $(window).width();
        if (windowWidth > 992) {
            document.write('<script type="text/javascript" color="0,0,255" pointColor="0,0,255" opacity= "0.8" zIndex="--1" count="150"src="/libs/background/canvas-nest.js"><\/script>');
        }
    </script>
    

    <!-- 背景静止彩带  洪卫 shw 2018  add 2019.09.15-->
    

    <!-- 背景动态彩带 洪卫 shw 2018  add 2019.09.15-->
    
    <script type="text/javascript">
        var windowWidth = $(window).width();
        if (windowWidth > 992) {
            document.write('<script type="text/javascript" src="/libs/background/ribbon-dynamic.js"><\/script>');
        }
    </script>
    

    <!-- 天气接口控件  洪卫 shw2018 add 2019.09.09 -->
    
    <!-- 天气接口  洪卫 shw2018 add 2019.09.09 -->
<script type="text/javascript">
    WIDGET = { FID: '1tFpFZ5Mtj' }
</script>
<!-- <script type="text/javascript" src="https://apip.weatherdt.com/float/static/js/r.js?v=1111"></script> -->

<script type="text/javascript">
    //只在桌面版网页启用特效
    var windowWidth = $(window).width();
    if (windowWidth > 768) {
        document.write('<script type="text/javascript" src="https://apip.weatherdt.com/float/static/js/r.js?v=1111"><\/script>');
    }
</script>
    


<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"log":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"left","width":150,"height":200},"mobile":{"show":false},"react":{"opacity":0.7}});</script><script>
            window.imageLazyLoadSetting = {
                isSPA: false,
                processImages: null,
            };
        </script><script>window.addEventListener("load",function(){var t=/\.(gif|jpg|jpeg|tiff|png)$/i,r=/^data:image\/[a-z]+;base64,/;Array.prototype.slice.call(document.querySelectorAll("img[data-original]")).forEach(function(a){var e=a.parentNode;"A"===e.tagName&&(e.href.match(t)||e.href.match(r))&&(e.href=a.dataset.original)})});</script><script>!function(n){n.imageLazyLoadSetting.processImages=o;var i=n.imageLazyLoadSetting.isSPA,r=Array.prototype.slice.call(document.querySelectorAll("img[data-original]"));function o(){i&&(r=Array.prototype.slice.call(document.querySelectorAll("img[data-original]")));for(var t,e,a=0;a<r.length;a++)t=r[a],e=void 0,0<=(e=t.getBoundingClientRect()).bottom&&0<=e.left&&e.top<=(n.innerHeight||document.documentElement.clientHeight)&&function(){var t,e,n,i,o=r[a];t=o,e=function(){r=r.filter(function(t){return o!==t})},n=new Image,i=t.getAttribute("data-original"),n.onload=function(){t.src=i,e&&e()},n.src=i}()}o(),n.addEventListener("scroll",function(){var t,e;t=o,e=n,clearTimeout(t.tId),t.tId=setTimeout(function(){t.call(e)},500)})}(this);</script></body>

</html>